<template>
    <div class="datamiddle">
        <div class="datatitle">
            <p>日程待办</p>
            <div class="right"><span>全部日程</span><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u443.svg" alt=""></div>
        </div>
        <div class="datacont">
            <el-calendar v-model="value">
            </el-calendar>  
        </div>
    </div>
</template>

<script>
export default {
    data() {
      return {
        value: new Date()
      }
    }
}
</script>

<style lang="scss" scoped>
.datamiddle{
    padding: 20px 15px 0;
    width: 340px;
    height: 525px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(242, 242, 242, 1);
    border-radius: 8px;
    .datatitle{
        padding: 0 8px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        p{
            text-align: left;
        }
        .right{
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            color: #999999;
            display: flex;
            align-items: center;
            img{
                margin-left: 5px;
            }
        }
    }
    .datacont{
        width: 340px;
        height: 330px;
    }
}
::v-deep .datacont .prev{
    width: 36px;
    height: 36px;
}
::v-deep .datacont .el-calendar-day{
    height: 36px;
    font-size: 12px;
}
</style>